<template>
  <div>
    <div class="img">
      <div class="head">
        <van-row gutter="300">
          <van-col span="8"
            ><img
              src=""
          @click="hou" /></van-col>

          <van-col span="8"
            ><img
              src="https://img.youpin.mi-img.com/jianyu/084fcd48_41f0_418f_83ad_3e5d237434f2.png"
           @click="shoppingcat" /></van-col>
        </van-row>
      </div>
    </div>
    <div class="banner" v-for="(v, i) in img" in :key="i">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="red">
        <van-swipe-item><img :src="v.img1" /></van-swipe-item>
        <van-swipe-item><img :src="v.img" /></van-swipe-item>
        <van-swipe-item><img :src="v.img2" /></van-swipe-item>
      </van-swipe>
      <div class="banner1">
        <img :src="v.img3" />
      </div>
      <img
        src="https://img.youpin.mi-img.com/jianyu/9b3e1dd3_2dab_4345_97c4_2f1b8755e108.png@base@tag=imgScale&h=138&m=1&q=80&w=750"
        alt=""
      />
    </div>
  </div>
</template>

<script>
import getserver from "../../../../api/apiserver";
export default {
  data() {
    return {
      img: [],
    };
  },
  mounted() {
    getserver("/bannerhead").then((ok) => {
      console.log(ok.data);
      this.img = ok.data;
    });
  },
  methods: {
    hou(){
      this.$router.go(-1)
    },
    shoppingcat(){
      this.$router.push("/gwc")
    }
  },
};
</script>

<style scoped>
.head img {
  width: 0.31rem;
  height: 0.31rem;
  margin-top: 0.15rem;
}
.head {
  width: 3.75rem;
  margin: auto;
  /* margin-top: 0.15rem; */
  overflow: hidden;
}
.img {
  width: 100%;
  height: 1.19rem;
  background-image: url(https://img.youpin.mi-img.com/jianyu/8d2d8746_622e_4236_a87e_786850f94a9a.png@base@tag=imgScale&h=239&m=1&q=80&w=750);
  background-repeat: no-repeat;
  background-size: 100% 1.19rem;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 0.2rem;
  line-height: 1.5rem;
  text-align: center;
}
.banner img {
  margin: auto;
  /* margin-top: 0.15rem; */
  width: 3.75rem;
  border-radius: 0.15rem;
}
.banner1 {
  width: 375px;
  height: 121px;
  margin: auto;
  margin-top: 15px;
}
</style>
